<template>
    <div class="detailContainer" :style="'min-height: '+docheight+'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="bannerCont">
            <img :src="detailInfo.course_cover" />
        </div>
        <div class="mainCont">
            <div class="detialName">{{ detailInfo.course_name }}</div>
            <div class="typeCont">
                <div :class="checkId==index?'typeItem isActive':'typeItem'" @click="checkFn(item,index)" :key="index" v-for="(item,index) in detailInfo.course_rule">
                    <div class="typeItemName">{{ item.rule_name }}</div>
                    <div class="typeItemPrice">{{ Number(item.price).toFixed(2) }}元/{{ getUnit() }}</div>
                </div>
            </div>
            <div class="bzCont">
                <div class="bzItem">
                    <span class="iconfont icon-shiming"></span>
                    <span>实名认证</span>
                </div>
                <div class="bzItem">
                    <span class="iconfont icon-shiming"></span>
                    <span>资质认证</span>
                </div>
                <div class="bzItem">
                    <span class="iconfont icon-yincaishijiao-"></span>
                    <span>因材施教</span>
                </div>
                <div class="bzItem">
                    <span class="iconfont icon-fangzhenKPIpingce"></span>
                    <span>专业效率</span>
                </div>
            </div>
            <div class="carCont">
                <div class="carTitle">
                    <div>课程亮点</div>
                </div>
                <div class="carMain">
                    <p>{{ detailInfo.course_introduce }}</p>
                    <div class="mainItem">
                        <div class="mainItemName">课程内容</div>
                        <ul>
                            <li :key="index" v-for="(item,index) in detailInfo.course_content">{{ item.name }}</li>
                        </ul>
                    </div>
                    <div class="goodsMaskCont" v-show="detailInfo.teacher_course.length>0">
                        <div class="mainItemName">课程老师</div>
                        <div class="techArr">
                        <div class="orderItem" :key="index" v-for="(item,index) in detailInfo.teacher_course">
                            <div class="goodsList">
                            <div class="goodsItem">
                                <div class="goodsTop">
                                    <div class="goodsImg">
                                        <img :src="item.teacher_head_img+ossSrc">
                                    </div>
                                    <div class="goodsInfo">
                                        <div class="goodsName">
                                            <div class="goodsNameLeft">
                                                <div class="newTag">{{ item.course_rule_name }}</div>
                                                <div>{{ item.teacher_nick_name }}</div>
                                            </div>
                                            <div class="goodsSex">
                                                <span v-if="item.teacher_sex==1" class="boy iconfont icon-xingbie-nan"></span>
                                                <span v-if="item.teacher_sex==2" class="girl iconfont icon-xingbie-nv"></span>
                                                <span>{{ item.age }}</span>
                                            </div>
                                        </div>
                                        <div class="orderTime">
                                            {{ item.teacher_time }} （{{ item.teacher_date }} ）
                                        </div>
                                        <div class="orderTime">
                                            <div class="orderIconItem">
                                                <div class="iconfont icon-shoucang2"></div>
                                                <div>5.0</div>
                                                <!-- <div>{{ (Number(item.teacher_score)/20).toFixed(1) }}</div> -->
                                            </div>
                                            <div class="orderNum">{{ item.teacher_years }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="underCont">
                                    <div class="hideCont">
                                        <div class="hideItem">
                                            <div class="hideName">毕业学院：</div>
                                            <div class="hideval">{{ item.graduation_institution }}</div>
                                        </div>
                                        <div class="hideItem">
                                            <div class="hideName">最高学历：</div>
                                            <div class="hideval">{{ item.education }}</div>
                                        </div>
                                        <div class="hideItem">
                                            <div class="hideName">教学经历：</div>
                                            <ul class="hideVal">
                                                <li :key="index2" v-for="(item2,index2) in item.experience">{{ item2.name }}</li>
                                            </ul>
                                        </div>
                                        <div class="hideItem">
                                            <div class="hideName">成功案例：</div>
                                            <ul class="hideVal">
                                                <li :key="index2" v-for="(item2,index2) in item.case">{{ item2.name }}</li>
                                            </ul>
                                        </div>
                                        <div class="hideItem">
                                            <div class="hideName">所获荣誉：</div>
                                            <ul class="hideVal">
                                                <li :key="index2" v-for="(item2,index2) in item.honor">{{ item2.name }}</li>
                                            </ul>
                                        </div>
                                        <div class="hideItem">
                                            <div class="hideName">自我介绍：</div>
                                            <div class="hideval flexText">{{ item.teacher_introduce }}</div>
                                        </div>
                                        <div class="imgCont">
                                            <div class="bookImgItem" :key="index2"  @click="showImg(item.qualifications,index2)" v-for="(item2,index2) in item.qualifications">
                                                <img :src="item2" />
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="showBtn">展示详情资料</div> -->
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">下单须知</div>
                        <ul>
                            <li>服务内容和范围： 我们提供各类学科的<span class="redText">一对一家教</span>服务。家教老师将根据学生的需求和学习情况，量身定制<span class="redText">个性化</span>的教学计划。</li>
                            <li>师资信息： 所有家教老师均为经过严格筛选和专业培训的<span class="redText">资深教师</span>，具有丰富的<span class="redText">教学经验</span>和良好的教学口碑。</li>
                            <li>课程安排： 上课时间和地点将根据学生和家长的需求进行协商，确保教学活动顺利进行。</li>
                            <li>费用说明： 课时费用根据所选教师而异，教材费用另计。</li>
                            <li>服务保障： 我们将定期对家教老师的教学质量进行评估和监控，确保提供高质量的教学服务。<span class="redText">如有任何疑问或投诉，请及时联系我们</span>的客服人员</li>
                            <li>其他注意事项： 学生和家长需要<span class="redText">提前准备好所需的学习材料</span>，如教材、练习册等。请在上课前确保学习环境安静、整洁，以便保证教学效果。</li>
                            <li>联系方式： 如有任何问题或需要咨询，请联系我们的客服人员。</li>
                            <li>所有家教课程的预约需通过平台进行<span class="redText">线上预约</span>。</li>
                            <li>为保障您的权益，付款应通过平台提供的安全支付系统完成，<span class="redText">禁止线下现金或其他方式交易</span>，若下线交易出现任何安全、教育质量问题，平台不承担任何责任。</li>
                        </ul>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">取消订单规则</div>
                        <ul>
                            <li><span class="redText">未接单可随时全额退款</span>。</li>
                            <li>平台核实，教师<span class="redText">接单之后将不能取消订单</span>。</li>
                        </ul>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">保障规则</div>
                        <ul>
                            <li>平台提供的教师均为平台核实的<span class="redText">真实、资质认证</span>的教师。</li>
                            <li>若授课过程中，教师有私下额外收费，请<span class="redText">立即举报</span>，平台核实将最大保障客户权益。</li>
                            <li>授课过程中，因授课质量问题想要更换教师，平台会尽快更换最优最匹配教师，家长满意为止，请<span class="redText">放心预约</span>。</li>
                        </ul>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">预约家教流程</div>
                        <ul>
                            <li>选择课程预约支付订单</li>
                            <li>等待平台核实并派单给最优教师</li>
                            <li>等待教师接单并联系您</li>
                            <li>预定时间上门一对一授课</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- <div class="detailImg">
                <img :src="detailInfo.package_details_img" />
            </div> -->
            <div class="replyCont">
                <div class="replyTop">
                    <div>用户点评({{ total+defReplay.length }}+)</div>
                </div>
                <div class="replyList">
                    <div class="replyItem" :key="index" v-for="(item,index) in replayArr">
                    <div class="replyUserCont">
                        <div class="userImg">
                            <img :src="item.head_img+ossSrc">
                        </div>
                        <div class="userInfo">
                        <div class="userName">
                            <!-- <div class="userNameVal">{{ item.nick_name }}</div> -->
                            <div class="userNameVal">****</div>
                            <div class="replyTime">{{ item.create_time }}</div>
                        </div>
                        <div class="replyRate">
                            <van-rate color="#6455d4" size="16px" v-model="item.star_rating" readonly allow-half />
                            <div class="delEvalText" @click="delEval(item,index)" v-if="item.is_user==1">删除</div>
                        </div>
                        </div>
                    </div>
                    <div class="replyInfoCont">
                        <div class="replayMain">
                            <div class="replyText">{{ item.evaluate_content }}</div>
                            <div class="replyImg">
                                <div :class="index2%3==0?'replyImgItem noleft':'replyImgItem'" :key="index2" v-for="(item2,index2) in item.evaluate_img">
                                <img :src="item2+ossSrc" @click="showImg(item.evaluate_img,index2)">
                                </div>
                            </div>
                            <!-- <div class="replayTech"><span class="iconfont icon-jishi"></span> {{ item.nick_name }}</div> -->
                        </div>
                    </div>
                    </div>
                    <div class="replyItem" :key="index" v-for="(item,index) in defReplay">
                    <div class="replyUserCont">
                        <div class="userImg">
                            <img :src="item.head_img+ossSrc">
                        </div>
                        <div class="userInfo">
                        <div class="userName">
                            <!-- <div class="userNameVal">{{ item.nick_name }}</div> -->
                            <div class="userNameVal">****</div>
                            <div class="replyTime">{{ item.create_time }}</div>
                        </div>
                        <div class="replyRate">
                            <van-rate color="#6455d4" size="16px" v-model="item.star_rating" readonly allow-half />
                            <div class="delEvalText" @click="delEval(item,index)" v-if="item.is_user==1">删除</div>
                        </div>
                        </div>
                    </div>
                    <div class="replyInfoCont">
                        <div class="replayMain">
                            <div class="replyText">{{ item.evaluate_content }}</div>
                            <div class="replyImg">
                                <div :class="index2%3==0?'replyImgItem noleft':'replyImgItem'" :key="index2" v-for="(item2,index2) in item.evaluate_img">
                                <img :src="item2+ossSrc" @click="showImg(item.evaluate_img,index2)">
                                </div>
                            </div>
                            <!-- <div class="replayTech"><span class="iconfont icon-jishi"></span> {{ item.nick_name }}</div> -->
                        </div>
                    </div>
                    </div>
                </div>
                <div class="loadMore" v-if="replayArr.length>0">{{ loadMoreText }}</div>
                <div class="loadMore" v-if="replayArr.length==0">到底啦～</div>
            </div>
        </div>
        <div class="ctrlCont">
            <div class="leftBtn">
                <div class="goBack">
                    <div @click="backFn" class="iconfont icon-fanhui"></div>
                    <div>首页</div>
                </div>
                <div class="userTel">
                    <div @click="contactFn" class="iconfont icon-kefu2"></div>
                    <div>客服</div>
                </div>
            </div>
            <div v-if="detailInfo.teacher_course.length>0" class="rightBtn" @click="goodsMask = true">选课下单</div>
            <div v-if="detailInfo.teacher_course.length==0" class="rightBtn halfColor">教师已约满</div>
        </div>
      </div>
      <van-popup
        v-model:show="goodsMask"
        round
        position="bottom"
        >
        <div class="buyMaskCont">
            <div class="priceNum">￥{{ getCheckMoney() }} </div>
            <div class="activeTip" v-if="detailInfo.course_rule">已选：{{ detailInfo.course_name }}-{{ detailInfo.course_rule[checkId].rule_name }}({{ goodsNum+getUnit() }})</div>
            <div class="checkCont">
                <div class="checkName">
                    <div>选择教师资质</div>
                </div>
                <div class="checkRadio">
                    <div @click="checkFn(item,index)" :class="checkId==index?'checkItem_active':'checkItem'" :key="index" v-for="(item,index) in detailInfo.course_rule">{{item.rule_name}}({{ item.price }}元/{{ getUnit() }})</div>
                </div>
            </div>
            <div class="checkName">
                <div>购买数量({{ detailInfo.start_num+getUnit() }}起购)</div>
            </div>
            <div class="checkNum">
                <div :class="goodsNum==detailInfo.start_num?'disBtn editBtn iconfont icon-jian1':'editBtn iconfont icon-jian1'" @click="downNum"></div>
                <div class="goodsnum">{{goodsNum}}</div>
                <div class="editBtn iconfont iconfont icon-jia" @click="upNum"></div>
            </div>
            <div class="maskBtn">
                <div class="buyGoods" v-if="goodsNum<detailInfo.start_num">{{ detailInfo.start_num+getUnit() }}起购</div>
                <div class="canBuy" v-if="goodsNum>=detailInfo.start_num" @click="buyFn"><span class="iconfont icon-shandian"></span>购买课程</div>
            </div>
        </div>
        </van-popup>
        <van-image-preview :startPosition="startPosition" v-model:show="showVantImg" :images="priveImg"></van-image-preview>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  import { Swiper,SwiperItem } from 'vux'
  import getLoad from '@/components/public/getLoad'
  import {details,evaluate} from "@/http/api";

    import getTimeOut from '@/components/public/getTimeOut'
    export default {
      components: {getLoad,getTimeOut,Swiper,SwiperItem},
      data() {
        return {
          showTimeOut:false,
          showCont:false,
          total:0,
          loadMoreText:'',
          
          goodsMask:false,
          
          checkId:0,
          priveImg:[],
          showVantImg:false,
          startPosition:0,
          detailInfo:{},
          replayArr:[],
          defReplay:[
            {head_img:'static/img/userImg/user1.png',create_time:'2024-02-20 18:31',evaluate_content:'选择了同城上门家教服务后，孩子的学习状态明显改善，学习成绩也有了很大的提高，非常感谢！！',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user2.png',create_time:'2024-02-19 20:17',evaluate_content:'老师很专业，孩子喜欢上学了',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user3.png',create_time:'2024-02-19 10:01',evaluate_content:'一对一真的效果好，推荐给大家',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user4.png',create_time:'2024-02-18 14:45',evaluate_content:'家教帮助孩子打好学科基础，值得信赖',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user5.png',create_time:'2024-02-17 09:21',evaluate_content:'成绩稳步上升，感谢家教的辅导',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user6.png',create_time:'2024-02-16 16:54',evaluate_content:'老师耐心教学，孩子进步明显',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user7.png',create_time:'2024-02-16 13:46',evaluate_content:'还不错',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user8.png',create_time:'2024-02-15 19:22',evaluate_content:'孩子变得更自信，谢谢家教的帮助',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user9.png',create_time:'2024-02-14 23:11',evaluate_content:'朋友推荐的，力推',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user10.png',create_time:'2024-02-13 13:58',evaluate_content:'专业的家教',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user11.png',create_time:'2024-02-13 12:36',evaluate_content:'效果非常好',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user12.png',create_time:'2024-02-12 11:19',evaluate_content:'家教服务非常专业，教学内容循序渐进，孩子学得非常扎实，非常感谢老师的辛勤付出！',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user13.png',create_time:'2024-02-11 11:51',evaluate_content:'家教讲解清晰，让孩子更容易理解',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user14.png',create_time:'2024-02-10 18:34',evaluate_content:'孩子的学科成绩有了质的提升',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user15.png',create_time:'2024-02-09 07:22',evaluate_content:'家教很负责，定期跟进学习情况',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user16.png',create_time:'2024-02-08 21:01',evaluate_content:'孩子的学习方法得到了有效改进',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user17.png',create_time:'2024-02-07 15:53',evaluate_content:'态度认真，效果很明显，点赞',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user18.png',create_time:'2024-02-06 12:23',evaluate_content:'老师教学方法很有针对性，对于孩子的学习特点有很深的了解，学习效果非常显著！',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user19.png',create_time:'2024-02-05 08:10',evaluate_content:'一对一家教确实比学校更个性化',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user20.png',create_time:'2024-02-04 17:51',evaluate_content:'孩子的学业压力明显减轻',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user21.png',create_time:'2024-02-03 08:47',evaluate_content:'家教的辅导让孩子学得更有条理',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user22.png',create_time:'2024-02-02 22:28',evaluate_content:'孩子的学习兴趣，效果很好',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user23.png',create_time:'2024-02-01 10:09',evaluate_content:'孩子的学业有了明显提升',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user24.png',create_time:'2024-01-31 18:41',evaluate_content:'家教老师非常有耐心，对孩子的教学一丝不苟，学习效果非常好，家长放心又放心！',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user25.png',create_time:'2024-01-30 14:34',evaluate_content:'家教的辅导真的很有针对性，效果杠杠的',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user26.png',create_time:'2024-01-29 09:12',evaluate_content:'确实不错',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user27.png',create_time:'2024-01-28 19:06',evaluate_content:'家教的辅导真的是有的放矢，效果很明显',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user28.png',create_time:'2024-01-27 07:48',evaluate_content:'感谢家教的定期反馈，让我了解孩子的学习情况',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user29.png',create_time:'2024-01-26 22:31',evaluate_content:'力推！！！',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user30.png',create_time:'2024-01-25 16:16',evaluate_content:'帮助孩子树立了正确的学习态度',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user31.png',create_time:'2024-01-22 11:18',evaluate_content:'帮助孩子树立了正确的学习态度',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user32.png',create_time:'2024-01-21 10:11',evaluate_content:'帮助孩子树立了正确的学习态度',star_rating:5,evaluate_img:[]},
            {head_img:'static/img/userImg/user33.png',create_time:'2024-01-20 08:15',evaluate_content:'帮助孩子树立了正确的学习态度',star_rating:5,evaluate_img:[]},
          ],
          goodsNum:1,
            per_page:5,
            page:1,
            last_page:0,
            total:0,
            getting:false,
        }
      },
      props: {},
      methods:{
        backFn(){
            this.$router.back()
        },
        checkFn(item,index){
            this.checkId = index   
        },
        getCheckMoney(){
            if(this.detailInfo.course_rule){
                let money = Number(this.detailInfo.course_rule[this.checkId].price)*this.goodsNum
                return money.toFixed(2)
            }
        },
        getUnit(){
            if(this.detailInfo.course_unit==1){
                return '小时'
            }else if(this.detailInfo.course_unit==2){
                return '课时'
            }
        },
        upNum(){
            this.goodsNum++
        },
        downNum(){
            if(this.goodsNum>this.detailInfo.start_num){
                this.goodsNum--
            }
        },
        contactFn(){
            window.location.href = 'tel:'+this.detailInfo.hotline_mobile
        },
        buyFn(){
            if(this.goodsNum>=this.detailInfo.start_num){
                let course_rule_name = this.detailInfo.course_rule[this.checkId].rule_name
                let course_price = this.detailInfo.course_rule[this.checkId].price
                this.$router.push({path:'/orderWait',query:{family_course_id:this.$route.query.id,course_price:course_price,course_rule_name:course_rule_name,num:this.goodsNum}})
            }
        },
        showImg(arr,index) {
            if(arr.length>0){
                this.startPosition = index
                this.priveImg = arr
                this.showVantImg = true
            }
        },
        getData(){
            let data ={
                family_course_id:this.$route.query.id,
            }
            details(data).then((res)=>{
                if(res.data.code==1){
                    this.goodsNum = res.data.data.start_num
                    this.detailInfo = res.data.data
                }else{
                    this.showToast = true
                    this.showText = res.data.msg
                }
                this.showCont = true
            }).catch(()=>{
                this.showCont = true
                this.showTimeOut = true
            })
        },
        getEval(){
            let data = {
                family_course_id:this.$route.query.id,
                per_page:this.per_page,
                page:this.page,
            }
            evaluate(data).then((res)=>{
                if(res.data.code==1){
                if(res.data.data.data.length>0){
                    let arr = res.data.data.data
                    for(var i=0;i<arr.length;i++){
                        this.replayArr.push(arr[i])
                    }
                    setTimeout(() => {
                        this.getting = false
                    }, 100);
                    this.last_page = res.data.data.last_page
                    this.total =  res.data.data.total
                    if(this.page==this.last_page){
                        this.loadMoreText = '到底啦～'
                    }else{
                        this.loadMoreText = '评论加载中~'
                    }
                }else{
                    this.last_page = 0
                    this.total = 0
                }
                }else{
                this.showToast = true
                this.showText = res.data.msg
                }
            }).catch(()=>{
                this.showToast = true
                this.showText = res.data.msg
            })
        },
        nextfn(){
            if(this.$route.path=='/detail'){
                let h = document.documentElement.scrollHeight||document.body.scrollHeight
                let wh = document.documentElement.clientHeight||document.body.clientHeight
                let top = document.documentElement.scrollTop||document.body.scrollTop
                let bottom = h-wh-top
                if(bottom<=50){
                if(this.getting==false){
                    if(this.last_page>this.page){
                    this.getting=  true
                    this.page++
                    this.getEval()
                    }
                }
                }
            }
        },
      },
      mounted(){
        window.addEventListener('scroll',this.nextfn)
      },
      created() {
        this.getData()
        this.getEval()
      },
    }
  </script>
  
  <style scoped lang="less">
  .detailContainer{
    background-color: #fff;
    padding-bottom: 3.75rem;
    box-sizing: border-box;
    .bannerCont {
      width: 100%;
      font-size: 0;
      img {
        width: 100%;
      }
    }
    .mainCont{
        box-sizing: border-box;
        background-color: #f7f7f7;
        .detialName{
            font-size: 0.8rem;
            font-weight:bold;
            text-align: center;
            padding: 0.75rem 0 0.25rem;
            background-color: #fff;
        }
        .typeCont{
            background-color: #fff;
            width: 100%;
            padding: 0.5rem 4%;
            box-sizing: border-box;
            font-size: 0.6rem;
            box-sizing: border-box;
            // justify-content: space-between;
            overflow-x: auto;
            white-space: nowrap;
            // flex-wrap: wrap;
            .typeItem{
                display: inline-block;
                white-space: nowrap;
                border-radius: 0.25rem;
                padding:0.35rem 0.7rem;
                box-sizing: border-box;
                position: relative;
                margin-right: 4%;
                border:1px solid #6455d4;
                color: #6455d4;
                text-align: center;
                .typeItemName{
                    font-weight: bold;
                    font-size: 0.7rem;
                }
                .typeItemPrice{
                    margin-top: 0.25rem;
                }
            }
            .isActive{
                background-color: #6455d4;
                color: #fff;
            }
        }
        .bzCont{
            display: flex;
            background-color: #fff;
            width: 100%;
            padding: 0.5rem 4%;
            box-sizing: border-box;
            justify-content: space-between;
            font-size: 0.6rem;
            .bzItem{
                color: #666;
                display: flex;
                align-items: center;
                .iconfont{
                    color: #6455d4;
                    font-size: 0.8rem;
                    margin-right: 0.25rem;
                }
            }
        }
        .carCont{
            margin-top: 0.75rem;
            background-color: #fff;
            width: 100%;
            padding: 0.75rem 4%;
            box-sizing: border-box;
            .carTitle{
                // color: #666;
                font-size: 0.7rem;
                display: flex;
                font-weight: bold;
                align-items: center;
                justify-content: space-between;
                .carTitleRight{
                    .serveTime{
                        color: #6455d4;
                        margin-left: 0.5rem;
                    }
                    .iconfont{
                        font-size: 0.6rem;
                    }
                }
            }
            .serveTag{
                width: 100%;
                margin-top: 0.75rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .tagItem{
                    width: 48%;
                    background-color: #ebebeb;
                    margin-bottom: 0.5rem;
                    text-align: center;
                    padding: 0.5rem 0;
                    border-radius: 0.15rem;
                    font-size: 0.6rem;
                }
            }
            .carMain{
                margin-top: 0.75rem;
                .goodsMaskCont{
                    width: 100%;
                    padding: 1rem 0 0;
                    box-sizing: border-box;
                    .mainItemName{
                        font-size: 0.7rem;
                        font-weight: bold;
                        margin-bottom: 0.5rem;
                    }
                    .techArr{
                        width: 100%;
                        .orderItem{
                            width: 100%;
                            background-color: #f7f7f7;
                            border-radius: 0.25rem;
                            padding:0.75rem 1rem;
                            margin-bottom: 0.75rem;
                            box-sizing: border-box;
                            position: relative;
                            
                            .goodsList{
                            width: 100%;
                            .goodsItem{
                                .goodsTop{
                                    width: 100%;
                                    margin-bottom: 0.5rem;
                                    display: flex;
                                    align-items: center;
                                    .goodsImg{
                                    width: 3.5rem;
                                    height: 3.5rem;
                                    overflow: hidden;
                                    border-radius: 0.25rem;
                                    margin-right: 0.5rem;
                                    img{
                                        width: 100%;
                                    }
                                }
                                .goodsInfo{
                                    width: 0.5rem;
                                    flex: 1;
                                    display: flex;
                                    flex-direction: column;
                                    height: 3.5rem;
                                    justify-content: space-between;
                                .goodsName{
                                    width: 100%;
                                    font-size: 0.7rem;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    .goodsNameLeft{
                                        display: flex;
                                        align-items: center;
                                        .newTag{
                                            background-color: #6455d4;
                                            color: white;
                                            font-size: 0.6rem;
                                            padding: 0.05rem 0.5rem;
                                            border-radius: 0.1rem;
                                            margin-right:0.5rem;
                                        }
                                    }
                                    .goodsSex{
                                        .boy{
                                            color: #5e81fd;
                                        }
                                        .girl{
                                            color: #fb87c9;
                                        }
                                    }
                                    
                                }
                                .orderTime{
                                    font-size: 0.6rem;
                                    color: #666;
                                    margin-top: 0.35rem;
                                    display: flex;
                                    align-items: center;
                                    .serveTime{
                                        color: #666;
                                        font-size: 0.6rem;
                                    }
                                    .newTag,.blackTag,.serveing{
                                        // background-color: #6455d4;
                                        border: 1px solid #6455d4;
                                        color: #6455d4;
                                        font-size: 0.6rem;
                                        padding: 0.05rem 0.5rem;
                                        border-radius: 0.1rem;
                                        margin-right: 
                                        0.5rem;
                                    }
                                    .blackTag{
                                    // background-color: #ebebeb;
                                    color: #666;
                                    border: 1px solid #666;
                                    }
                                    .serveing{
                                    color: #45bb4f;
                                    border: 1px solid #45bb4f;
                                    }
                                    .orderIconItem{
                                        display: flex;
                                        align-items: center;
                                        margin-right: 0.5rem;
                                    }
                                    .iconfont{
                                        color: #6455d4;
                                        margin-right: 0.25rem;
                                    }
                                    .orderNum{
                                        margin-left: 0.75em;
                                    }
                                }
                                }
                                }
                                .underCont{
                                    padding: 0.75rem 0 0;
                                    box-sizing: border-box;
                                    color: #666;
                                    .hideCont{
                                        .hideItem{
                                            display: flex;
                                            line-height: 1rem;
                                            margin-bottom: 0.75rem;
                                        }
                                        .imgCont{
                                            width: 100%;
                                            display: flex;
                                            flex-wrap: wrap;
                                            .bookImgItem{
                                                height: 3rem;
                                                margin-bottom: 0.25rem;
                                                margin-right:0.25rem;
                                                img{
                                                    height: 100%;
                                                    border-radius: 0.25rem;
                                                }
                                            }
                                        }
                                        .hideName{
                                            width: 4rem;
                                        }
                                        .hideVal{
                                            flex: 1;
                                            width: 2rem;
                                            padding-left: 0.75rem;
                                            box-sizing: border-box;
                                            li{
                                                list-style: outside;
                                            }
                                        }
                                    }
                                    .flexText{
                                        flex: 1;
                                        width: 2rem;
                                    }
                                    .showBtn{
                                        margin-top:0.75rem;
                                        text-align: center;
                                        border-top: 1px dashed #ccc;
                                        padding-top: 0.75rem;
                                    }
                                }
                                
                            }
                            }
                        }
                    }
                }
                .mainItem{
                    margin-top: 0.75rem;
                    .mainItemName{
                        font-size: 0.7rem;
                        font-weight: bold;
                        margin-bottom: 0.25rem;
                    }
                    ul{
                        list-style: outside;
                        padding-left: 1.5rem;
                        box-sizing: border-box;
                    }
                    .redText{
                        color: #F56C6C;
                    }
                }
            }
        }
        .tipCont{
            background-color: #edf2fd;
            width: 100%;
            padding: 0.75rem 4%;
            box-sizing: border-box;
            .tipTitle{
                color: #6455d4;
                display: flex;
                justify-content: space-between;
                font-size: 0.7rem;
            }
            ul{
                margin-top: 0.75rem;
                list-style: outside;
                padding-left: 1.5rem;
                box-sizing: border-box;
                color: #6455d4;
            }
        }
        .replyCont{
            background-color: #fff;
            width: 100%;
            padding: 0.75rem 4%;
            margin-top: 0.75rem;
            box-sizing: border-box;
            .replyTop{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.75rem 0;
                font-size: 0.7rem;
                font-weight: bold;
                // border-bottom: 1px solid #ebebeb;
                color: #333;
            }
            .replyList{
                width: 100%;
                .replyItem{
                width: 100%;
                padding-bottom:0.25rem;
                margin-bottom: 0.5rem;
                // border-bottom: 1px solid #ebebeb;
                .replyUserCont{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .userImg{
                    width: 2.25rem;
                    height: 2.25rem;
                    border-radius: 1.5rem;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                    }
                    .userInfo{
                    flex: 1;
                    width: 0.5rem;
                    margin: 0 0 0 0.75rem;
                    .userName{
                        display: flex;
                        width: 100%;
                        align-items:center;
                        justify-content: space-between;
                        .userNameVal{
                        font-size: 0.75rem;
                        white-space: nowrap;
                        overflow: hidden;
                        width: 1rem;
                        flex: 1;
                        margin-right: 0.75rem;
                        text-overflow: ellipsis;
                        }
                        .replyTime{
                        font-size: 0.6rem;
                        color: #999;
                        }
                    }
                    .replyRate{
                        margin-top: 0.15rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .delEvalText{
                        color: #999;
                        font-size: 0.6rem;
                        text-decoration: underline;
                        }
                    }
                    }
                }
                .replyInfoCont{
                    width: 100%;
                    margin-top: 0.5rem;
                    padding-left: 3rem;
                    box-sizing: border-box;
                    .replayMain{
                    background-color: #f2f2f2;
                    padding: 0.5rem;
                    box-sizing: border-box;
                    border-radius: 0.25rem;
                    .replyImg{
                        width: 100%;
                        display: flex;
                        margin-top: 0.75rem;
                        flex-wrap: wrap;
                        .replyImgItem{
                        margin-bottom: 0.25rem;
                        margin-left: 2%;
                        height: 4rem;
                        img{
                            height: 100%;
                            border-radius: 0.25rem;
                        }
                        }
                        .noleft{
                        margin-left: 0;
                        }
                    }
                    .replayTech{
                        text-align: right;
                        margin-top: 0.25rem;
                        color: #666;
                        font-size: 0.6rem;
                        color: #6455d4;
                    }
                    }
                }
                }
            }
            .loadMore{
                // padding-bottom: 1.5rem;
                text-align: center;
                font-size: 0.6rem;
                color: #999;
            }
        }
        .detailImg{
            background-color: #fff;
            font-size: 0;
            img{
                width: 100%;
            }
        }
    }
    .ctrlCont{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 4%;
        box-sizing: border-box;
        align-items: center;
        .leftBtn{
            display: flex;
            align-items: center;
            .goBack,.userTel{
                padding: 0 0.75rem;
                text-align: center;
                font-size: 0.6rem;
                margin-right: 0.75rem;
                .iconfont{
                    font-size: 1.2rem;
                }
            }
            .userTel{
                .iconfont{
                    font-size: 1.1rem;
                }
            }
        }
        .rightBtn{
            font-size: 0.7rem;
            background-color: #6455d4;
            color: white;
            padding: 0.5rem 2rem;
            border-radius: 1rem;
            letter-spacing: 0.2rem;
        }
        .halfColor{
            opacity: 0.5;
        }
    }
    .buyMaskCont{
        width: 100%;
        padding: 1rem 4%;
        box-sizing: border-box;
        background-color: #f7f7f7;
        .priceNum{
            margin: 0.5rem 0;
            width: 100%;
            text-align: center;
            font-size: 2rem;
            color: #6455d4;
        }
        .activeTip{
            font-size: 0.6rem;
            color: #666;
            text-align: center;
            margin-bottom: 0.75rem;
        }
        .checkCont{
        width: 100%;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
        .checkName{
            width: 100%;
            font-size: 0.7rem;
            font-weight: bold;
            margin-bottom: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .checkTip{
            color: #999;
            font-size: 0.6rem;
            font-weight: normal;
            }
        }
        .checkRadio{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            box-sizing: border-box;
            .checkItem,.checkItem_active{
                width: 48%;
                border:1px solid #6455d4;
                color: #6455d4;
                font-size: 0.6rem;
                padding:0.5rem 0.5rem;
                text-align: center;
                margin: 0px 0 0.75rem;
                border-radius: 0.25rem;
                box-sizing: border-box;
                }
                .checkItem_active{
                background-color:#6455d4;
                color: white;
                }
            }
        }
        .checkName{
            font-size: 0.7rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .checkNum{
            width: 100%;
            display: flex;
            justify-content: center;
            .editBtn{
                width: 2.5rem;
                height: 2.5rem;
                font-size: 1.5rem;
                text-align: center;
                line-height: 2.5rem;
                background-color: #6455d4;
                color: #fff;
                border-radius: 50%;
            }
            .disBtn{
                background-color: #ccc;
                color: white;
            }
            .goodsnum{
                height: 2.5rem;
                width: 5rem;
                line-height: 2.5rem;
                text-align: center;
                font-size: 1.5rem;
            }
            }
        .maskBtn{
            // margin: 1.25rem 0 0.75rem;
            margin-top: 1.25rem;
            width: 100%;
            border-radius: 0.25rem;
            overflow: hidden;
            display: flex;
            .buyGoods,.canBuy{
                width: 100%;
                font-size: 0.7rem;
                text-align: center;
                background-color: #6455d4;
                color: white;
                padding: 0.75rem 0;
            }
            .buyGoods{
                opacity: 0.5;
            }
        }
    }
  }
  </style>
  